<!DOCTYPE html>
<html>
<head>
	<title>深入了解事件——自定义事件—— .sync修饰符(vue 2.3.0 以上版本才可以)</title>
	<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
</head>
<body>
 	<div id="app1" class="details">
        <h1>---APP1------------</h1>
        <my-component :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;">
        	
        </my-component>
        <button @click="changeValue">toggle</button>
    </div>
    <div id="app2">
    	<h2>---APP2-------</h2>
    	<text-document v-bind:title.sync="titleValue"></text-document>
    </div>
</body>
</html>
<script type="text/javascript">
	Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          console.log("emit-show");
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
	var app=new Vue({
		el:'#app1',
		data:{
			valueChild:true,
		},
		methods:{
			changeValue(){
            	this.valueChild = !this.valueChild
        	}
		},

	})
	Vue.component('text-document',{
		template: '<div> <p>{{title}}</p>	<button @click.stop="change">改变Title</button> </div>',
		props:['title'],
		methods:{
			change(){
				this.$emit('update:title', "title为组件改变");
			}
		}
	})
	var app2=new Vue({
		el:'#app2',
		data:{
			titleValue:"title为原始值"
		},

	})

</script>